<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_员工列表练习</title>
</head>
<body>
    <input type="text" placeholder="请输入员工姓名" id="i1">
    <input type="text" placeholder="请输入员工工资" id="i2">
    <input type="text" placeholder="请输入员工岗位" id="i3">
    <button onclick="addEmp()">点击添加员工</button>
    <hr>
    <table border="1px" >
        <caption>员工表</caption>
        <tr>
            <th>员工姓名</th>
            <th>员工工资</th>
            <th>员工岗位</th>
        </tr>
    </table>
    <script>
        //定义数组用来保存用户输入的多个员工数据
        let arr=[];
        function addEmp(){
            //获取用户输入的值
            let uName = document.querySelector('#i1').value.trim();
            let uSalary=document.querySelector('#i2').value.trim();
            let uJob =document.querySelector('#i3').value.trim();
            //对值进行校验
            if(!uName || !uSalary || !uJob){
                alert('请填写完整员工信息');
                return;
            }
            //输入一个员工信息，就增加一行三列
            let trE=document.createElement('tr');
            let nameTD=document.createElement('td');
            let salaryTD=document.createElement('td');
            let jobTD=document.createElement('td');

            //将收集到的数据填入到单元格中
            nameTD.innerHTML=uName;
            salaryTD.innerHTML=uSalary;
            jobTD.innerHTML=uJob;

            //将单元格追加到tr中
            trE.append(nameTD,salaryTD,jobTD);
            //将tr追加到table中
            let tableE =document.querySelector('table');
            tableE.append(trE);

            document.querySelector('#i1').value='';
            document.querySelector('#i2').value='';
            document.querySelector('#i3').value='';

            arr.push({
                name:uName,
                salary:uSalary,
                job:uJob
            })
        }
    </script>
</body>
</html>